<template>
  <yt-page title="视频列表">
    <yt-group ref="group"
      :searchApi="searchApi"
      :group="false">
      <div @click="onDetail(video)"
        slot-scope="video"
        class="video-item">
        <img :src="require('./img/zanting.png')">
        <span>{{video.DeviceName}}</span>
      </div>
    </yt-group>
  </yt-page>
</template>

<script>
import { commonApi } from '@/common/api/commonApi.js';
import { bridge } from '@/common/plugin/utils/bridge'

export default {
  data() {
    return {
      searchApi: async ({ skip, limit }) => {
        let items = await commonApi.search('measure_video', { equalTo: { gridId: this.$route.query.gridId }, skip, limit })
        // 摄像头型号不一致，地址需要转换
        items.map(v => {
          v.DeviceNum
            ? v.AddressIP = `http://218.92.104.98:8388/mag/hls/${v.DeviceNum}/0/live.m3u8`
            : ''
        })
        return items
      }
    }
  },
  methods: {
    onDetail(video) {
      bridge.Play(video.AddressIP)
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus" type="text/stylus">
>>>.video-item {
  width: 50%;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  line-height: 30px;
  display inline-block
  img {
    max-width: 100%;
  }
}
</style>
